<template>
  <div class="browsing-analysis-container">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span>阅读分析</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="refreshAnalysis">刷新</el-button>
      </div>
      
      <div v-loading="loading">
        <!-- 基本统计信息 -->
        <div class="stats-row">
          <div class="stats-item">
            <div class="stats-value">{{ totalViews }}</div>
            <div class="stats-label">阅读文章数</div>
          </div>
          <div class="stats-item">
            <div class="stats-value">{{ totalReadTime }}</div>
            <div class="stats-label">总阅读时长</div>
          </div>
          <div class="stats-item">
            <div class="stats-value">{{ avgReadTime }}</div>
            <div class="stats-label">平均阅读时长</div>
          </div>
        </div>
        
        <div class="empty-data" v-if="!loading && !hasData">暂无数据，请先浏览一些文章</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserBrowsingAnalysisApi } from '@/api/recommendation'

export default {
  name: 'UserBrowsingAnalysis',
  data() {
    return {
      loading: false,
      totalViews: 0,
      totalReadTime: '0分钟',
      avgReadTime: '0分钟',
      hasData: false
    }
  },
  mounted() {
    this.getAnalysisData()
  },
  methods: {
    async getAnalysisData() {
      this.loading = true
      try {
        const res = await getUserBrowsingAnalysisApi()
        if (res.code === 200) {
          this.totalViews = res.data.totalViews || 0
          this.totalReadTime = this.formatReadTime(res.data.timeAnalysis?.totalReadTime)
          this.avgReadTime = this.formatReadTime(res.data.timeAnalysis?.avgReadTime)
          this.hasData = this.totalViews > 0
        }
      } catch (error) {
        console.error('获取浏览分析数据失败:', error)
        this.$message.error('获取浏览分析数据失败')
      } finally {
        this.loading = false
      }
    },
    
    refreshAnalysis() {
      this.getAnalysisData()
    },
    
    formatReadTime(minutes) {
      if (!minutes) return '0分钟'
      if (minutes < 60) return minutes + '分钟'
      
      const hours = Math.floor(minutes / 60)
      const remainingMinutes = minutes % 60
      
      return hours + '小时' + (remainingMinutes > 0 ? remainingMinutes + '分钟' : '')
    }
  }
}
</script>

<style lang="scss" scoped>
.browsing-analysis-container {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
  }
  
  .stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    
    .stats-item {
      text-align: center;
      
      .stats-value {
        font-size: 24px;
        font-weight: bold;
        color: #409EFF;
      }
      
      .stats-label {
        font-size: 14px;
        color: #606266;
        margin-top: 5px;
      }
    }
  }
  
  .empty-data {
    text-align: center;
    color: #909399;
    padding: 20px 0;
  }
}
</style> 